<template>
  <div class="voice-todo-input-wrapper">
    <!-- 内联模式：只显示一个语音图标 -->
    <div
      v-if="mode === 'inline'"
      class="voice-inline-icon"
      @click.stop="handleInlineClick"
      :class="{ 'recording': isRecording, 'disabled': !isVoiceSupported }"
      :title="isVoiceSupported ? (isRecording ? '正在录音中...' : '点击开始语音输入') : '浏览器不支持语音识别'"
    >
      <el-icon :size="18">
        <Microphone />
      </el-icon>
    </div>

    <!-- 浮动按钮模式 -->
    <el-button
      v-if="mode === 'float' && isVoiceSupported && showQuickAdd"
      type="primary"
      circle
      class="voice-float-btn"
      :class="{ 'recording': isRecording }"
      @click="toggleRecording"
      :title="isRecording ? '点击停止录音' : '点击开始语音输入待办'"
    >
      <el-icon v-if="!isRecording"><Microphone /></el-icon>
    </el-button>

    <!-- 全屏语音识别遮罩层 -->
    <transition name="voice-overlay">
      <div v-if="isRecording && showOverlay" class="voice-recording-overlay" @click.stop>
        <!-- 背景动效 -->
        <div class="voice-bg-animation"></div>
        <div class="voice-recording-content">
          <!-- 语音图标区域 - 固定在顶部 -->
          <div class="voice-animation-fixed">
            <div class="voice-animation">
              <div class="voice-circle voice-circle-1"></div>
              <div class="voice-circle voice-circle-2"></div>
              <div class="voice-circle voice-circle-3"></div>
              <!-- 音波纹效果 - 只在有语音时显示 -->
              <div v-if="voiceTranscript" class="sound-wave wave-1"></div>
              <div v-if="voiceTranscript" class="sound-wave wave-2"></div>
              <div v-if="voiceTranscript" class="sound-wave wave-3"></div>
              <div v-if="voiceTranscript" class="sound-wave wave-4"></div>
              <div 
                class="voice-icon-wrapper"
                :class="{ 'voice-active': voiceTranscript }"
              >
                <el-icon 
                  class="voice-icon" 
                  :class="{ 'voice-icon-active': voiceTranscript }"
                  :size="60"
                >
                  <Microphone />
                </el-icon>
              </div>
            </div>
            <div class="voice-label">{{ label || '正在持续聆听...' }}</div>
            <div class="voice-tip-text">{{ tipText || '说出待办事项，点击停止按钮完成输入' }}</div>
          </div>
          
          <!-- 文字显示区域 - 可滚动 -->
          <div class="voice-text-display">
            <div 
              v-if="voiceTranscript" 
              class="voice-transcript-large"
              ref="transcriptRef"
            >
              {{ voiceTranscript }}
            </div>
            <div v-else class="voice-placeholder">{{ placeholder || '请说出您的待办事项' }}</div>
          </div>
          
          <!-- 操作按钮区域 - 固定在下部 -->
          <div class="voice-stop-wrapper">
            <!-- 重置按钮 - 只在有文本时显示 -->
            <el-button
              v-if="voiceTranscript"
              type="warning"
              size="large"
              round
              @click="clearTranscript"
              class="voice-reset-btn"
            >
              <el-icon><RefreshLeft /></el-icon>
              清除文字
            </el-button>
            <el-button
              type="danger"
              size="large"
              round
              @click="stopRecording"
              class="voice-stop-btn"
            >
              <el-icon><Close /></el-icon>
              停止录音
            </el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { Microphone, Close, RefreshLeft } from '@element-plus/icons-vue'
import { useVoiceTodo } from '@/uses/useVoiceTodo'

const props = defineProps({
  // 显示模式：inline(内联), float(浮动)
  mode: {
    type: String,
    default: 'inline',
    validator: (value) => ['inline', 'float'].includes(value)
  },
  // 是否显示全屏遮罩层
  showOverlay: {
    type: Boolean,
    default: true
  },
  // 标签文本
  label: {
    type: String,
    default: ''
  },
  // 提示文本
  tipText: {
    type: String,
    default: ''
  },
  // 占位符文本
  placeholder: {
    type: String,
    default: ''
  },
  // 是否显示快速添加面板（用于控制浮动按钮显示）
  showQuickAdd: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['parse-complete', 'recording-start', 'recording-stop'])

const transcriptRef = ref(null)

// 语音输入功能
const {
  isVoiceSupported,
  isRecording,
  voiceTranscript,
  startRecording,
  stopRecording,
  toggleRecording,
  clearTranscript
} = useVoiceTodo({
  onParseComplete: (parsedTodo, originalText) => {
    emit('parse-complete', parsedTodo, originalText)
  },
  onRecordingStart: () => {
    emit('recording-start')
  },
  onRecordingStop: () => {
    emit('recording-stop')
  }
})

// 处理内联图标点击
const handleInlineClick = () => {
  if (!isVoiceSupported.value) {
    return
  }
  // 如果正在录音，点击停止；否则开始录音
  if (isRecording.value) {
    stopRecording()
  } else {
    startRecording()
  }
}

// 监听语音文本变化，自动滚动到底部
watch(() => voiceTranscript.value, () => {
  nextTick(() => {
    if (transcriptRef.value) {
      transcriptRef.value.scrollTop = transcriptRef.value.scrollHeight
    }
  })
})

// 暴露方法给父组件
defineExpose({
  startRecording,
  stopRecording,
  toggleRecording,
  clearTranscript,
  isVoiceSupported,
  isRecording,
  voiceTranscript
})
</script>

<style scoped>
.voice-todo-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 内联模式：语音图标 */
.voice-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 50%;
  color: #909399;
}

.voice-inline-icon:hover:not(.disabled) {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.voice-inline-icon.recording {
  color: #f56c6c;
}

.voice-inline-icon.recording .el-icon {
  animation: pulse 1.5s ease-in-out infinite;
}

.voice-inline-icon.disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.voice-inline-icon .el-icon {
  transition: all 0.3s;
}

/* 浮动按钮模式 */
.voice-float-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  font-size: 24px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  transition: all 0.3s;
}

.voice-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.6);
}

.voice-float-btn.recording {
  animation: pulse-ring 1.5s ease-in-out infinite;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

/* 全屏语音识别遮罩层 */
.voice-recording-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景动效 */
.voice-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  animation: bg-shimmer 8s ease-in-out infinite;
}

@keyframes bg-shimmer {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.voice-recording-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

/* 语音图标区域 - 固定在顶部 */
.voice-animation-fixed {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.voice-animation {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-circle {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
}

.voice-circle-1 {
  width: 120px;
  height: 120px;
  animation: voice-pulse 2s ease-in-out infinite;
}

.voice-circle-2 {
  width: 160px;
  height: 160px;
  animation: voice-pulse 2s ease-in-out infinite 0.3s;
}

.voice-circle-3 {
  width: 200px;
  height: 200px;
  animation: voice-pulse 2s ease-in-out infinite 0.6s;
}

.voice-icon-wrapper {
  position: relative;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
  transition: all 0.3s ease;
}

.voice-icon-wrapper.voice-active {
  animation: voice-icon-wrapper-pulse 1.5s ease-in-out infinite;
}

.voice-icon {
  color: white;
  transition: all 0.3s ease;
}

.voice-icon.voice-icon-active {
  animation: voice-icon-pulse 1.5s ease-in-out infinite;
}

/* 音波纹效果 */
.sound-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  animation: wave-expand 1.2s ease-in-out infinite;
  opacity: 0;
}

.wave-1 {
  left: calc(50% - 25px);
  animation-delay: 0s;
}

.wave-2 {
  left: calc(50% - 10px);
  animation-delay: 0.2s;
}

.wave-3 {
  left: calc(50% + 10px);
  animation-delay: 0.4s;
}

.wave-4 {
  left: calc(50% + 25px);
  animation-delay: 0.6s;
}

.voice-text-display {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-label {
  font-size: 18px;
  opacity: 0.9;
  font-weight: 500;
  flex-shrink: 0;
}

.voice-tip-text {
  font-size: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}

.voice-transcript-large {
  font-size: 18px;
  font-weight: 400;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  min-height: 60px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
  word-break: break-all;
  text-align: left;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  line-height: 1.8;
  scroll-behavior: smooth;
  flex: 1;
  min-height: 0;
}

.voice-transcript-large::-webkit-scrollbar {
  width: 6px;
}

.voice-transcript-large::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.voice-transcript-large::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.voice-transcript-large::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.voice-placeholder {
  font-size: 16px;
  opacity: 0.6;
  padding: 40px 20px;
  text-align: center;
}

.voice-stop-wrapper {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  margin-top: 10px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.voice-reset-btn {
  padding: 12px 32px;
  background: #e6a23c;
  border-color: #e6a23c;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.4);
  transition: all 0.3s;
}

.voice-reset-btn:hover {
  background: #ebb563;
  border-color: #ebb563;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(230, 162, 60, 0.6);
}

.voice-stop-btn {
  padding: 12px 32px;
  background: #f56c6c;
  border-color: #f56c6c;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
  transition: all 0.3s;
}

.voice-stop-btn:hover {
  background: #f78989;
  border-color: #f78989;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(245, 108, 108, 0.6);
}

/* 动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
  }
}

@keyframes voice-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes voice-icon-wrapper-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.8);
  }
}

@keyframes voice-icon-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
}

@keyframes wave-expand {
  0% {
    height: 20px;
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1);
  }
  70% {
    height: 40px;
    opacity: 0.6;
    transform: translate(-50%, -50%) scaleY(1.2);
  }
  100% {
    height: 50px;
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(1.5);
  }
}

.voice-overlay-enter-active,
.voice-overlay-leave-active {
  transition: opacity 0.3s;
}

.voice-overlay-enter-from,
.voice-overlay-leave-to {
  opacity: 0;
}
</style>

